<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"  :width="375" :height="375"> 
            <van-swipe-item  v-for="item in lunbotu" :key="item.id">
                <img width="375px" height="375px" :src="item.img_url" alt="">
            </van-swipe-item>
          </van-swipe>
        <div id="sanduihao">
            <div>
                <van-icon name="checked" />
                <div id="wz">30天无忧退货</div>
            </div>
            <div>
                <van-icon name="checked" />
                <div id="wz">48小时快速退费</div>
            </div>
            <div>
                <van-icon name="checked" />
                <div id="wz">满88元免邮费</div>
            </div>
        </div>
        <div id="biaoti">
            <div id="hz1">{{wenzi.name}}</div>
            <div id="hz2">{{wenzi.goods_brief}}</div>
            <div id="hz3">￥ {{wenzi.retail_price | jiage()}} 元</div>
        </div>
        
        <van-cell is-link @click="showPopup">展示弹出层</van-cell>
<van-popup v-model="show"  position="bottom">内容</van-popup>
        <div id="xiaohui">
        </div>
        <!-- 商品参数 -->
        <div id="spcs">
            <div id="csz">
                商品参数
            </div>
            <!-- 一大堆字 -->
            <div id="yddz">


            </div>
        </div>
        <van-goods-action v-for="item in jiashangpin" :key="item.id">
          
          <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
          <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
          <van-goods-action-button
            type="danger"
            text="立即购买"
            @click="onClickButton(item.goods_id,item.id,1           )"
          />
        </van-goods-action>
    </div>
</template>

<script>
import {Gettubiaoxiangxi,Getjia} from '../request/app.js'
export default {
    data() {
        return {
            lunbotu:[],
            wenzi:{},
            show:false,
            jieshao:[],
            jiashangpin:{
          
            }
        };
    },
    created(){
        // console.log(1);
        let {id} = this.$route.params
        Gettubiaoxiangxi(id).then(res=>{
            console.log(res);
            this.lunbotu = res.data.gallery
            this.wenzi = res.data.info
            this.jieshao = res.data.attribute
          this.jiashangpin = res.data.productList
        })
    },
    mounted() {
        
    },

    methods: {
        showPopup(){
            this.show = true
        },
        onClickIcon(){
          // console.log(1);
        },
        onClickButton(id,ids,num){
          Getjia(id,ids,num).then(res=>{
            // console.log(res);
            this.$router.push('/cart')

          })
        }
    },
    filters:{
        jiage:function(value){
            let val=''
      if(!isNaN(value) ){
        if(value %1==0){//整数
          val=value+".00"
        }
     
        else{//小数
          val=parseFloat(value).toFixed(2)
        }
      }
      return val
        }
    },  
};
</script>

<style  scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  #sanduihao{
    width: 100%;
    height: 30px;
    background-color: #efefef;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  #wz{
    font-size: 10px;
    display: inline;
    line-height: 30px;
  }
  .van-icon{
    font-size: 10px;
    display: inline;
    line-height: 30px;
    color: #8d0000;
  }
  #biaoti{
    width: 100%;
    height: 200px;
    background-color:#fff;
    display: flex;
    flex-direction: column;
    justify-content:space-evenly ;

  }
  #hz1{
      text-align: center;  
        font-size: 20px;
    }
  #hz2{
    text-align: center;  
    font-size: 15px;
  }
  #hz3{
    text-align: center;  
    color: #8d0000;
  }
  #xiaohui{
    width: 100%;
    height: 20px;
  }
  #csz{
    width: 100%;
    height: 30px;
    background-color: #fff;
    font-size: 20px;
  }
</style>